<template>
	<view class="zone">
		<Header title="实物兑换"></Header>
		<view class="main">
			<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
			<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
			<view class="info">
				<view class="part" v-for="(item,index) in list" :key="index">
					<view class="kobx">
						<image class="kimg" :src="item.props.img" mode="widthFix"></image>
						<view class="jtab">
							<view class="name">
								{{item.name}}
							</view>
							<view class="need">
								可兑换灵石:{{item.show_money}}
							</view>
							<view class="need">
								拥有:{{item.number}}
							</view>
						</view>
					</view>
					<view class="duo" @click="exchangefun(item)">
						兑换
					</view>
				</view>
			</view>
		</view>

		<!-- 确认兑换 -->
		<u-mask :show="exchange">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>确认兑换</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop">
							<view class="tanbg">
								<image class="tanimg" :src="img" mode="widthFix"></image>
								<view class="tanname">
									{{itemlist.name}}
								</view>
								<view class="dangq">
									可兑换灵石:{{itemlist.show_money}}
								</view>
							</view>
							<view class="dangq2">
								当前拥有:<text class="red">{{itemlist.number}}</text>
							</view>
							<view class="bujingqi">
								<Number placeholder='请输入兑换数量' v-model="value" size="25px" :min="1" :max="99999"
									:input-width="300" color="#fff">
								</Number>
							</view>
							<view class="dangq2">
								预计获得灵石:<text class="red">{{value*itemlist.show_money}}</text>
							</view>
							<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
								class="join" @click="successfun">立即参与</u-button>
							<view class="dangq">
								当前灵石:{{userinfo.lingshi}}
							</view>
						</view>
					</view>
				</view>
				<image class="m_close" @click="guanbi" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
		<!-- 兑换成功 -->
		<u-mask :show="success">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>兑换成功</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop">
							<image class="tanimg" :src="img" mode="widthFix"></image>

							<view class="succp">
								兑换{{value}}个{{itemlist.name}}成功，恭喜获得<text
									class="red">{{value*itemlist.show_money}}</text>灵石
							</view>
						</view>
					</view>
				</view>
				<image class="m_close" @click="success = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [],
				itemlist: '',
				userinfo: {},
				exchange: false,
				value: 0,
                img:'',
				success: false,
			}
		},
		onLoad() {
            this.getUserInfo()
			this.getreallist()
		},
		methods: {
			async successfun() {
				if (this.value == 0) {
					this.$u.toast('数量不能为0')
					return
				}

				if (this.value == '' || this.value == null) {
					this.$u.toast('请输入数量')
					return
				}

				if (this.value > this.itemlist.number) {
					this.$u.toast('数量不足')
					return
				}

				let res = await this.$http.index.realreward({
					pic_id: this.itemlist.id,
					num: this.value
				})
				if (res.code == 1) {
					this.success = true
					this.exchange = false
                    this.getUserInfo()
					this.getreallist()
				} else {
					this.$u.toast(res.msg)
				}
			},
			// 获取个人信息
			async getUserInfo() {
				let res = await this.$http.index.getUserInfo()
				if (res.code == 1) {
					this.userinfo = res.data
				}
			},
			exchangefun(item) {
				this.itemlist = item
                this.img = item.props.img
				
				this.exchange = true
			},
			guanbi() {
				this.exchange = false
				this.itemlist = ''
			},
			async getreallist() {
				let res = await this.$http.index.getreallist()
				if (res.code == 1) {
					this.list = res.data
				}
			},
		}
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.main {
		position: relative;
		margin-top: 20px;
	}

	.yun {
		position: absolute;
		top: -5%;
		left: 0;
		width: 44%;
		z-index: 9;
	}

	.ping1 {
		width: 100%;
		display: flex;
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 21%;
		}

		text {
			font-size: 12px;
			color: #735783;
			font-weight: normal;
			line-height: 12px;
			margin: 0 4%;
		}
	}


	.info {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 5px;
		height: calc(100vh - 107px);
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		overflow-y: scroll;
	}

	.part {
		width: 49.5%;
		background: rgba(223, 217, 213, 1);
		border-radius: 5px;
		padding: 10px 8px;
		box-sizing: border-box;
		margin-bottom: 5px;

		.kimg {
			width: 37%;
			background: url(http://image.qxgm.site/tdz/img/duobao/kuang.png) no-repeat;
			background-size: 100% 100%;
		}

		.kobx {
			display: flex;
			align-items: center;
			margin-top: 14px;
		}

		.name {
			font-size: 16px;
			color: #333333;
			font-weight: normal;
			line-height: 16px;
		}

		.jtab {
			flex: 1;
			margin-left: 5px;
		}

		.need {
			font-size: 13px;
			font-weight: normal;
			color: #333333;
			line-height: 13px;
			margin-top: 14px;
		}


	}

	.duo {
		display: block;
		margin: 10px auto 0;
		width: 56%;
		text-align: center;
		font-size: 15px;
		color: #f9eeb9;
		height: 37px;
		line-height: 37px;
		font-weight: normal;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/btn2.png) no-repeat;
		background-size: 100% 100%;
	}


	.jihuop {
		padding: 0 7%;
		text-align: center;

		.tanbg {
			padding: 10px 0;
			background: linear-gradient(90deg, rgba(198, 188, 186, 0.1) 0%, rgba(177, 164, 162, 0.1) 50%, rgba(198, 188, 186, 0.1) 100%);
		}

		.smtitle {
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 14%;
			}

			text {
				font-size: 12px;
				color: #735783;
				font-weight: normal;
				line-height: 12px;
				margin: 0 4%;
			}
		}

		.tanimg {
			width: 27%;
			background: url(http://image.qxgm.site/tdz/img/duobao/kuang.png) no-repeat;
			background-size: 100% 100%;
		}

		.tanname {
			font-size: 16px;
			font-weight: normal;
			color: #333333;
			line-height: 16px;
			margin-top: 5px;
		}



		.tanparogrss {
			position: relative;
			width: 100%;
			height: 14px;
			background: linear-gradient(0deg, #714E7A, #C97E89);
			border-radius: 1px;
			border: 1px solid;
			margin-top: 12px;
			border-image: linear-gradient(0deg, #452818, #905F44) 1 1;
		}

		.tanproess {
			position: absolute;
			top: 0;
			left: 0;
			height: 12px;
			background: linear-gradient(0deg, #E17636, #C97E89);
			border-radius: 1px;
		}

		.staab {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: normal;
			font-size: 12px;
			color: #333333;
			line-height: 12px;
			margin-top: 10px;
		}

		.red {
			color: #FF461D;
		}

		.stbana {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 12px;

			.ytab {
				width: 24%;
				font-size: 14px;
				color: #996666;
				font-weight: normal;
				height: 35px;
				line-height: 35px;
				background: url(http://image.qxgm.site/tdz/img/duobao/btn.png) no-repeat;
				background-size: 100% 100%;
			}

			.act {
				color: #333;
				background: url(http://image.qxgm.site/tdz/img/duobao/btn2.png) no-repeat;
				background-size: 100% 100%;
			}
		}

	}

	.join {
		display: block;
		margin: 11px auto 0;
		width: 116px;
		font-size: 18px;
		height: 37px;
		font-weight: normal;
		color: #f9e5b6;
		line-height: 37px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
	}

	.dangq {
		font-size: 12px;
		font-weight: normal;
		color: #333333;
		line-height: 12px;
		margin-top: 9px;
	}

	.dangq2 {
		font-size: 13px;
		font-weight: normal;
		color: #333333;
		line-height: 13px;
		margin-top: 15px;
		margin-bottom: 10px;
	}

	.succp {
		font-size: 16px;
		font-weight: normal;
		color: #333333;
		line-height: 16px;
		text-align: center;
		margin-top: 20px;
	}
</style>